<template lang="jade">
    div(class="loading-container",
        v-show="visible",
        :style="{height:height+'px',width:width+'px',top:top+'px'}")
        div(class="loader")
</template>
<script>
function onElementHeightChange(elm, callback){
    var lastHeight = elm.clientHeight;
    var newHeight;
	(function run(){
		newHeight = elm.clientHeight;
		if( lastHeight != newHeight )
			callback();
		lastHeight = newHeight;

        if( elm.onElementHeightChangeTimer )
          clearTimeout(elm.onElementHeightChangeTimer);

		elm.onElementHeightChangeTimer = setTimeout(run, 200);
	})();
}

    export default {
        data(){
            return {
                height: 0,
                width: 0,
                top:0,
                visible: true
            }
        },
        props:{
            visible: {type:Boolean,default:false}
        },
        watch:{
            'visible'(val){
                // 隐藏滚动条
                document.body.style.overflowY = val ? 'hidden' : 'auto';
            }
        },
        methods: {
            get_body_size(){
                this.body = this.body || document.getElementsByTagName('body')[0];
                this.width = this.body.offsetWidth;
                // 即滚动高度
                this.top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
                this.height =  window.innerHeight || document.documentElement.clientHeight || document.body.offsetHeight;
            },
            bind_body_resize_event: function(){
                this.body = this.body || document.getElementsByTagName('body')[0];
                var vm = this;
                this.body.onresize = function(){
                    vm.get_body_size();
                };
                onElementHeightChange(this.body, vm.get_body_size);
            }
        },
        mounted(){
            this.get_body_size();
            this.bind_body_resize_event();
        }
    }
</script>
<style lang="scss">
.loading-container{
    position: absolute;
    background-color:rgba(255,255,255,0.8);
    left:0;
    z-index:2018;
}

$colors:
    hsla(337, 84, 48, 0.75)
    hsla(160, 50, 48, 0.75)
    hsla(190, 61, 65, 0.75)
    hsla( 41, 82, 52, 0.75);
  
$size: 2.5em;
$thickness: 0.5em;

// Calculated variables.
$lat: ($size - $thickness) / 2;
$offset: $lat - $thickness;

.loader {
  position: relative;
  width: $size;
  height: $size;
  transform: rotate(165deg);
  
  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: $thickness;
    height: $thickness;
    border-radius: $thickness / 2;
    transform: translate(-50%, -50%);
  }
  
  &:before {
    animation: before 2s infinite;
  }
  
  &:after {
    animation: after 2s infinite;
  }
}

@keyframes before {
  0% {
    width: $thickness;
    box-shadow:
      $lat (-$offset) nth($colors, 1),
      (-$lat) $offset nth($colors, 3);
  }
  35% {
    width: $size;
    box-shadow:
      0 (-$offset) nth($colors, 1),
      0   $offset  nth($colors, 3);
  }
  70% {
    width: $thickness;
    box-shadow:
      (-$lat) (-$offset) nth($colors, 1),
      $lat $offset nth($colors, 3);
  }
  100% {
    box-shadow:
      $lat (-$offset) nth($colors, 1),
      (-$lat) $offset nth($colors, 3);
  }
}

@keyframes after {
  0% {
    height: $thickness;
    box-shadow:
      $offset $lat nth($colors, 2),
      (-$offset) (-$lat) nth($colors, 4);
  }
  35% {
    height: $size;
    box-shadow:
        $offset  0 nth($colors, 2),
      (-$offset) 0 nth($colors, 4);
  }
  70% {
    height: $thickness;
    box-shadow:
      $offset (-$lat) nth($colors, 2),
      (-$offset) $lat nth($colors, 4);
  }
  100% {
    box-shadow:
      $offset $lat nth($colors, 2),
      (-$offset) (-$lat) nth($colors, 4);
  }
}



/**
 * Attempt to center the whole thing!
 */

html,
body {
//   height: 100%;
}

.loader {
  position: absolute;
  top: calc(50% - #{$size / 2});
  left: calc(50% - #{$size / 2});
}

</style>
